import React from 'react'
import {inject, observer} from 'mobx-react';
import {Tools,Icon,Tag } from 'weaver-mobile';
import {toJS} from 'mobx';
import { DragSource,DropTarget  } from 'react-dnd';
const getLabel = Tools.getLabel;

const DRAG_NEWS_TYPE = 'DRAG_NEWS_TYPE';
const dragTagSource = {
  beginDrag: (props) => ({
    id: props.id,
  }),
  canDrag: (props) => props.closable,
};
const dragTagCollect = (connect, monitor) => {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
    currentOffset: monitor.getSourceClientOffset(),
  }
}
const dragTagTarget = {
  hover: (props, monitor) => {
    const { id, } = monitor.getItem();
    const overId = props.id;
    if (id !== overId) {
      props.moveTag(id, overId)
    }
  }
};
const dragTagTargetConnect = (connect, monitor) => {
  return {
    connectDropTarget: connect.dropTarget(),
  };
}
const DragTagRender = (props) => {
  let { connectDropTarget, connectDragSource, isDragging,currentOffset} = props; 
  let style = {};
  if (isDragging && currentOffset) {
    style.position = 'fixed';
    style.pointerEvents = 'none';
    style.top = currentOffset.y;
    style.left = currentOffset.x;
    style.zIndex = 10000;
  }
  return (
    <div>
      <div style={isDragging ? {opacity: 0} : {display: 'none'}}>
        <Tag {...props}/>
      </div>
      {isDragging ?
        connectDragSource(
          <div style={style}>
            <Tag {...props}/>
          </div>
        ) :
        connectDragSource(connectDropTarget(
        <div style={style}>
          <Tag {...props}/>
        </div>
      ))}
    </div>
  );
}
const DragTag = DropTarget(DRAG_NEWS_TYPE, dragTagTarget, dragTagTargetConnect)(DragSource(DRAG_NEWS_TYPE, dragTagSource, dragTagCollect)(DragTagRender));
const DropTargetSource = {
}
const DropTargetCollect = (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver()
});
@observer
class DropTargetContainer extends React.Component {
  
  render() {
    let { connectDropTarget, ischange, typeId, myTag ,clickMyColumnTag} = this.props;
    return connectDropTarget(
      <div className="tag-container news-mytag" >
        {toJS(myTag).map((val,index) => (
          val&&
          <DragTag selected={ischange} closable={!ischange} className={typeId !== val.columnid ? 'am-tag-active':'am-tag-blue'}
                   key={val.columnid}
                   id={val.columnid}
                   onChange={()=>{
                     if(ischange){
                      clickMyColumnTag(val,index);
                     }
                   }}
                   index={index}
                   moveTag={this.props.onTagMove}
                   onClose={() => {
                     this.props.onTagClose(index,val);
                   }}>
            {val.columnname}
          </DragTag>
        ))}
      </div>
    );
  }
}
const TagDragWrapper = DropTarget(DRAG_NEWS_TYPE, DropTargetSource, DropTargetCollect)(DropTargetContainer);

/* 我的栏目，调整栏目tag */
@inject('newsStore')
@observer
export default class NewsTag extends React.Component {
  
  //在不能编辑状态下点击我的栏目下的tag标签
  clickMyColumnTag = (data,index) =>{
    const {newsStore} = this.props
    newsStore.setChooseTabid(data,index);
    newsStore.newstagisshow();
    newsStore.getNews(data.columnid);
  }
  
  //添加我的栏目
  newstagAdd = (index,data) => {
    const {newsStore} = this.props;
    //当允许编辑的时候才可以添加我的栏目
    newsStore.newstagAdd(index,data);
    if(newsStore.ischange){
      //不需要点击保存直接添加栏目
      newsStore.updateAddMyTagstatus(data);
    }
  }
  
  //判断是否进行编辑我的栏目
  newstagedit = (event) =>{
    const {newsStore} = this.props;
    newsStore.newstagedit();
    //如果点击了按钮，并且按钮是完成按钮
    if(newsStore.ischange){
      newsStore.saveMovetagedit();
    }
  }
  render() {
    const {newsStore} = this.props;
    const {myTag,moreTag,isshow,ischange,clicktagspan,editspan,typeId} = newsStore;
    return (
      <div className="news-tag-parent" style={isshow ? {display:'inline-block'}:{display:'none'}}>
        <div className="news-tag-top" >
          <div className="news-tag-top-bar">
            <div className="news-tag-top-bar-my">{getLabel(388750, '我的栏目')}</div>
            <div className="news-tag-top-bar-click">{ischange?getLabel(388751, '点击进入栏目'):clicktagspan}</div>
            <div className="news-tag-top-bar-edit"  onClick={this.newstagedit}>{ischange?getLabel(388752, '排序删除'):editspan}</div>
            <Icon type="cross" className="news-tag-top-bar-close" onClick={newsStore.newstagisshow}/>
          </div>
          <TagDragWrapper clickMyColumnTag={this.clickMyColumnTag} myTag={myTag} ischange={ischange} typeId={typeId} onTagClose={newsStore.newstagRemove} onTagMove={newsStore.moveTag}/>
          <div className="news-tag-top-bar2" style = {moreTag.length === 0?{display:'none'}:{display:'inline-block'}}>
            <span className="news-tag-top-bar2-more">{getLabel(388753, '更多栏目')}</span>
            <span className="news-tag-top-bar2-add">{getLabel(388754, '点击添加更多栏目')}</span>
          </div>
          <div className="tag-container news-moretag">
            {toJS(moreTag).map((val,index) => (
              val&&
              <Tag selected
                   key={val.columnid}
                   onChange={() => {
                     this.newstagAdd(index,val);
                   }}
              >{val.columnname}</Tag>
            ))}
          </div>
        </div>
        <div className="news-tag-bottom" onClick={newsStore.newstagisshow}></div>
      </div>
    );
  }
}